<template>
  <div class="content">
    <div class="msg-list">
      <search />
      <chatList />
    </div>
    <div class="chat-box">
      <message />
      <v-text />
    </div>
  </div>
</template>

<script>
import search from '@/components/search/groupSearch'
import chatList from '@/components/grouplist/groupChatList'
import message from '@/components/message/groupMessage'
import vText from '@/components/text/groupText'
import { mapGetters, mapState } from 'vuex'

export default {
  name: 'GroupChat',
  components: {
    search,
    chatList,
    message,
    vText
  },
  computed: {
    ...mapGetters([
      'selectedGroupChat'
    ])
  }
}
</script>

<style lang="stylus" scoped>
.content
  display: flex
  width: 800px

  .msg-list
    width: 250px
    background: rgb(230, 230, 230)

  .chat-box
    flex: 1
</style>
